import React from 'react';
import {
  Box,
  Typography,
  Grid,
  Avatar
} from '@mui/material';

const categories = [
  { id: 1, title: '全部' },
  { id: 2, title: '热门推荐' },
  { id: 3, title: '中文资源' },
  { id: 4, title: '英文资源' },
  { id: 5, title: '研究数据' },
  { id: 6, title: '多模态' },
];

export default function DatasetCategories() {
  const selectedId = 1; // 默认选中“全部”
  return (
    <Box sx={{ mb: 4 }}>
      {/* 数据集分类标题 */}
      <Box sx={{ display: 'flex', alignItems: 'center', mb: 2 }}>
        <Avatar src="/iocns/my_project.png" sx={{ mr: 1, width: 24, height: 24 }} />
        <Typography sx={{ fontSize: '16px', color: 'rgba(86, 85, 92, 1)', fontWeight: 600 }}>
          数据集分类
        </Typography>
      </Box>
      {/* 分类横向列表 */}
      <Box sx={{ display: 'flex', gap: 3 }}>
        {categories.map((category) => (
          <Box key={category.id} sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
            <Typography
              sx={{
                fontSize: '16px',
                color: category.id === 1 ? 'rgba(0, 0, 0, 0.85)' : (category.id === selectedId ? '#1976d2' : 'rgba(0, 0, 0, 0.85)'),
                fontWeight: 500,
                cursor: 'pointer',
                transition: 'color 0.2s',
                '&:hover': { color: '#1976d2' },
              }}
            >
              {category.title}
            </Typography>
            {category.id === selectedId && (
              <Box sx={{ width: '100%', height: '3px', bgcolor: '#1976d2', borderRadius: 2, mt: '4px' }} />
            )}
          </Box>
        ))}
      </Box>
    </Box>
  );
}